<!DOCTYPE html>
<html class="am-touch js cssanimations">
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>分享预约</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="renderer" content="webkit" />
    <link rel="icon" type="image/png" href="assets/i/favicon.png" />
    <link rel="stylesheet" href="assets/css/jquery.fullPage.css" />
    <link rel="stylesheet" href="assets/css/animate.css" />
    <style type="text/css">
        html, body{ margin:0; padding:0; width:100%; height:100%; overflow:hidden; }
        div.section div{ position: absolute; overflow: hidden; }
        div.section div.divImg{ bottom: 0; }
        img{ background: url("assets/i/action/green-bg.png") no-repeat; width: 100%; }
        .bg1{ background: url("assets/i/action/bg1-font1.png") no-repeat;
            width: 640px;
            height: 28px;
            top: -500px;
        }
        .bg2{ background: url("assets/i/action/bg1-font2.png") no-repeat;
            width: 640px;
            height: 80px;
            top: 40%;
            left: -500px;
        }
        .bg3{ background: url("assets/i/action/bg1-font3.png") no-repeat;
            width: 640px;
            height: 27px;
            top: -500px;
        }
        .bg4{ background: url("assets/i/action/bg1-font4.png") no-repeat;
            width: 640px;
            height: 29px;
            bottom: 50px;
            display: none;
        }
        .top{ background: url("assets/i/action/bg1-top.png") no-repeat; width: 640px; height: 101px; bottom: -70px; }
        .ybg1{
            background: url("assets/i/action/bg2-1.png") no-repeat;
            width: 640px;
            height: 1008px;
        }
        .ybg2{
            background: url("assets/i/action/bg2-font1.png") no-repeat;
            width: 640px;
            height: 111px;
            top: 15%;
        }
        .bbg1{
            background: url("assets/i/action/bg3-1.png") no-repeat;
            width: 640px;
            height: 1008px;
        }
        .bg3-1{
            background: url("assets/i/action/bg3-bg1.png") no-repeat;
            width: 640px;
            height: 1008px;
        }
        .bg3-2{
            background: url("assets/i/action/bg3-bg2.png") no-repeat;
            width: 640px;
            height: 319px;
        }
        .bbg2{
            background: url("assets/i/action/bg3-font1.png") no-repeat;
            width: 640px;
            height: 207px;
            top: 65%;
        }
        .lbg1{
            background: url("assets/i/action/bg4-1.png") no-repeat;
            width: 640px;
            height: 1008px;
        }
        .lbg2{
            background: url("assets/i/action/bg4-font1.png") no-repeat;
            width: 640px;
            height: 253px;
            top: 72%;
        }
        .gbg1{
            background: url("assets/i/action/bg5-1.png") no-repeat;
            width: 640px;
            height: 600px;
        }
        .gbg2{
            background: url("assets/i/action/bg5-font1.png") no-repeat;
            width: 640px;
            height: 165px;
            top: 68%;
        }
        .sbg1{
            background: url("assets/i/action/bg6-1.png") no-repeat;
            width: 640px;
            height: 154px;
        }
        .sbg2{
            background: url("assets/i/action/bg6-font1.png") no-repeat;
            width: 640px;
            height: 221px;
            top: 18%;
        }
        .sbg3{
            background: url("assets/i/action/bg6-2.png") no-repeat;
            width: 640px;
            height: 85px;
            top: 46%;
        }
        .sbg4{
            background: url("assets/i/action/bg6-font2.png") no-repeat;
            width: 640px;
            height: 345px;
            top: 57%;
        }
        .mbg1{
            background: url("assets/i/action/bg7-1.png") no-repeat;
            width: 640px;
            height: 157px;
        }
        .mbg2{
            background: url("assets/i/action/bg7-font1.png") no-repeat;
            width: 640px;
            height: 168px;
            top: 18%;
        }
        .mbg3{
            background: url("assets/i/action/bg7-2.png") no-repeat;
            width: 640px;
            height: 81px;
            top: 40%;
        }
        .mbg4{
            background: url("assets/i/action/bg7-font2.png") no-repeat;
            width: 640px;
            height: 226px;
            top: 50%;
        }
        .btn{
            background: url("assets/i/action/bg7-btn.png") no-repeat;
            width: 640px;
            height: 77px;
            bottom: 0;
        }
        .zbg1{
            background: url("assets/i/action/bg8-font1.png") no-repeat;
            width: 640px;
            height: 39px;
            top: 35%;
        }
        .zbg2{
            background: url("assets/i/action/bg8-font2.png") no-repeat;
            width: 640px;
            height: 33px;
            top: 75%;
        }
        .wenxin{
            width: 343px;
            height: 343px;
            top: 42%;
            left: 23%;
        }
        .wenxin img{
            width: 343px;
            height: 343px;
        }
        .bb, .bb1, .bb2{ display: none; }
        .an{
            background: url("assets/i/action/anniu.png") no-repeat;
            width: 29px;
            height: 16px;
            bottom: 0;
            left: 48%;
        }
        
        /*
            new
        */

        .bg2-3{
            background: url("assets/i/action/bg2-bg3.png") no-repeat;
            width: 640px;
            height: 319px;
            top: 45%;
        }

        .bg2-5{
            background: url("assets/i/action/bg2-bg5.png") no-repeat;
            width: 640px;
            height: 1009px;
        }
        
        .bg4-1{
            background: url("assets/i/action/bg4-bg1.png") no-repeat;
            width: 640px;
            height: 1011px;
        }
        
        .bg4-2{
            background: url("assets/i/action/bg4-bg2.png") no-repeat;
            width: 640px;
            height: 129px;
        }
        
        .bg4-3{
            background: url("assets/i/action/bg4-bg3.png") no-repeat;
            width: 640px;
            height: 319px;
        }

        @media only screen and (max-width:320px){
            .bg1, .bg2, .bg3, .bg4, .top, .ybg2, .bbg2, .lbg2, .gbg1, .gbg2, .sbg1, .sbg2, .sbg3, .sbg4, .mbg1, .mbg2, .mbg3, .mbg4, .btn, .zbg1, .zbg2, .wenxin, .an,
            .bg2-31{ background-size: 50% 50%; }
            .wenxin img{ width: 50%; height: 50%; }
        }

        @media only screen and (min-width:330px) and (max-width:380px) {
            .bg1, .bg2, .bg3, .bg4, .top, .ybg2, .bbg2, .lbg2, .gbg1, .gbg2, .sbg1, .sbg2, .sbg3, .sbg4, .mbg1, .mbg2, .mbg3, .mbg4, .btn, .zbg1, .zbg2, .wenxin, .an,
            .bg2-31{ background-size: 58% 58%; }
            .wenxin img{ width: 58%; height: 58%; }
        }

        @media only screen and (min-width:385px) and (max-width:420px) {
            .bg1, .bg2, .bg3, .bg4, .top, .ybg2, .bbg2, .lbg2, .gbg1, .gbg2, .sbg1, .sbg2, .sbg3, .sbg4, .mbg1, .mbg2, .mbg3, .mbg4, .btn, .zbg1, .zbg2, .wenxin, .an,
            .bg2-31{ background-size: 65% 65%; }
            .wenxin img{ width: 65%; height: 65%; }
        }

        @media only screen and (max-height: 480px) {
            .bg4-1, .bg3-1, .bg2-5, .ybg1, .bbg1, .lbg1{ background-size: 50% 50%; }
            .zbg1{ top: 25%; }
            .zbg2{ top: 70%; }
            .wenxin{ top: 32%; }
            .bg2-3{ background-size: 50% 50%; top: 47%; }
            .bg3-2{ background-size: 50% 50%; top: 26.5%; }
            .bg4-2{ background-size: 50% 50%; top: 10%; }
            .bg4-3{ background-size: 50% 50%; top: 23.5%; }
        }

        @media only screen and (min-height: 490px) and (max-height: 568px) {
            .bg4-1, .bg3-1, .bg2-5, .ybg1, .bbg1, .lbg1{ height: 1136px; background-size: 50% 50%; }
            .bg2-3{ background-size: 60% 60%; top: 47.5%; left: -5px; }
            .bg3-2{ background-size: 54% 54%; top: 26%; left: -10px; }
            .bg4-2{ background-size: 55% 55%; top: 10%; left: -25px; }
            .bg4-3{ background-size: 52% 52%; top: 24%; }
        }

        @media only screen and (min-height: 569px) and (max-height: 640px) {
            .bg4-1, .bg3-1, .bg2-5, .ybg1, .bbg1, .lbg1{ height: 1280px; background-size: 56% 50%; }
            .bg2-3{ background-size: 68% 68%; top: 44.5%; }
            .bg3-2{ background-size: 61% 61%; top: 26%; left: -15px; }
            .bg4-2{ background-size: 62% 62%; top: 10%; left: -25px; }
            .bg4-3{ background-size: 58% 58%; top: 24%; }
        }

        @media only screen and (min-height: 641px) and (max-height: 667px) {
            .bg4-1, .bg3-1, .bg2-5, .ybg1, .bbg1, .lbg1{ height: 1334px; background-size: 59% 50%; }
            .bg2-3{ background-size: 71% 71%; top: 44.5%; }
            .bg3-2{ background-size: 64% 64%; top: 26%; left: -15px; }
            .bg4-2{ background-size: 67% 67%; top: 10%; left: -35px; }
            .bg4-3{ background-size: 62% 61%; top: 24%; }
        }

        @media only screen and (min-height: 668px) and (max-height: 736px) {
            .bg4-1, .bg3-1, .bg2-5, .ybg1, .bbg1, .lbg1{ height: 1472px; background-size: 65% 50%; }
            .bg2-3{ background-size: 78% 78%; top: 44.5%; }
            .bg3-2{ background-size: 70% 70%; top: 26%; left: -15px; }
            .bg4-2{ background-size: 72% 72%; top: 10%; left: -35px; }
            .bg4-3{ background-size: 68% 67%; top: 24%; }
        }
    </style>
</head>
<body>
<div id="fullpage-wrapper">
    <div class="section section1">
        <div class="divImg"><img style="margin-bottom: -3px; display: block;" src="assets/i/action/green-bg.png" alt=""/></div>
        <div class="bg bg1" rel="-500,0,35,0"></div>
        <div class="bg bg2" rel="0,-500,40,0"></div>
        <div class="bg3" rel="-500,0,55,0"></div>
        <div class="bg4" rel=""></div>
        <div class="top"></div>
    </div>
    <div class="section section2">
        <div class="divImg"><img style="display: block;" src="assets/i/action/yellow-bg.png" alt=""/></div>
        <!--<div class="bb ybg1"></div>-->
        <div class="bb bg2-5"></div>
        <!--<div class="bb bg2-1"></div>
        <div class="bb bg2-2"></div>
        <div class="bb bg2-3"></div>
        <div class="bb bg2-4"></div>-->
        <div class="bb bg2-3"></div>
        <div class="bg ybg2" rel="-500,0,15,0"></div>
        <div class="an"></div>
    </div>
    <div class="section section3">
        <div class="divImg"><img style="display: block;" src="assets/i/action/blue-bg.png" alt=""/></div>
        <!--<div class="bb bbg1"></div>-->
        <div class="bb bg3-1"></div>
        <div class="bb bg3-2"></div>
        <div class="bg bbg2" rel="-500,0,65,0"></div>
        <div class="an"></div>
    </div>
    <div class="section section4">
        <div class="divImg"><img style="display: block;" src="assets/i/action/lan-bg.png" alt=""/></div>
        <!--<div class="bb lbg1"></div>-->
        <div class="bb bg4-1"></div>
        <div class="bb bg4-2"></div>
        <div class="bb bg4-3"></div>
        <div class="bg lbg2" rel="72,-500,72,0"></div>
        <div class="an"></div>
    </div>
    <div class="section section5">
        <div class="divImg"><img style="display: block;" src="assets/i/action/green2-bg.png" alt=""/></div>
        <div class="bb gbg1"></div>
        <div class="bg gbg2" rel="-500,0,68,0"></div>
        <div class="an"></div>
    </div>
    <div class="section section6">
        <div class="divImg"><img style="display: block;" src="assets/i/action/yellow2-bg.png" alt=""/></div>
        <div class="bb1 sbg1"></div>
        <div class="bg sbg2" rel="-500,0,18,0"></div>
        <div class="bb2 sbg3"></div>
        <div class="bg2 sbg4" rel="57,-500,57,0"></div>
        <div class="an"></div>
    </div>
    <div class="section section7">
        <div class="divImg"><img style="display: block;" src="assets/i/action/blue2-bg.png" alt=""/></div>
        <div class="bb mbg1"></div>
        <div class="bb mbg2"></div>
        <div class="bb mbg3"></div>
        <div class="bb mbg4"></div>
        <div class="bb btn"></div>
        <div class="an"></div>
    </div>
    <div class="section section8">
        <div class="divImg"><img style="display: block;" src="assets/i/action/lan2-bg.png" alt=""/></div>
        <div class="bb zbg1"></div>
        <div class="bb wenxin"><img src="assets/i/action/erweima.png" alt="快快车生活微信公众号"/></div>
        <div class="bb zbg2"></div>
    </div>
</div>

<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/jq.easing.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.fullPage.min.js"></script>
<script type="text/javascript" src="assets/js/zepto.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#fullpage-wrapper').fullpage({
            sectionsColor: ['#05bd65', '#f99639', '#4094cb', '#1fd7de', '#15a93b', '#f79034', '#4094cb', '#1bd1da'],
            afterRender: function () {
                $('.section .bg').each(function(){
                    var $rel = $(this).attr('rel');
                    var $arr = $rel.split(',');
                    $(this).animate({
                        top: $arr[2] + '%',
                        left: $arr[3] + '%'
                    }, 700);
                });

                var $arrBg3 = $('.section .bg3').attr('rel').split(',');
                $('.section1 .bg3').animate({
                    top: $arrBg3[2] + '%',
                    left: $arrBg3[3] + '%'
                }, 1000);
                $('.section1 .bg4').fadeIn(1500);

                $('.top').fadeIn(500).animate({
                    bottom: '-50px'
                }, 1000).fadeOut(500).animate({
                    bottom: '-70px'
                });

                setInterval(function () {
                    $('.top').fadeIn(500).animate({
                        bottom: '-50px'
                    }, 1000).fadeOut(500).animate({
                        bottom: '-70px'
                    });
                }, 1000);
            },

            afterLoad: function (anchorLink, index) {
                if(index == 1){
                    $('.section .bg').each(function(){
                        var $rel = $(this).attr('rel');
                        var $arr = $rel.split(',');
                        $(this).animate({
                            top: $arr[2] + '%',
                            left: $arr[3] + '%'
                        }, 700);
                        $(this).fadeIn(1000);
                    });

                    var $arrBg3 = $('.section .bg3').attr('rel').split(',');
                    $('.section .bg3').animate({
                        top: $arrBg3[2] + '%',
                        left: $arrBg3[3] + '%'
                    }, 1000);

                    $('.section .bg4').fadeIn(1500);

                    $('.top').fadeIn(500).animate({
                        bottom: '-50px'
                    }, 1000).fadeOut(500).animate({
                        bottom: '-70px'
                    });

                    setInterval(function () {
                        $('.top').fadeIn(500).animate({
                            bottom: '-50px'
                        }, 1000).fadeOut(500).animate({
                            bottom: '-70px'
                        });
                    }, 1000);
                }

                if (index == 2 || index == 3 || index == 4 || index == 5 || index == 6 || index == 7 || index == 8) {
                    $('.section .bg').each(function(){
                        var $rel = $(this).attr('rel');
                        var $arr = $rel.split(',');
                        $(this).animate({
                            top: $arr[2] + '%',
                            left: $arr[3] + '%'
                        }, 700);
                        $(this).fadeIn(1000);
                    });

                    $('.section .bb').each(function(){
                        $(this).fadeIn(500);
                    });

                    $('.an').fadeIn(500).animate({
                        bottom: '20px'
                    }, 500).fadeOut(500).animate({
                        bottom: '0'
                    });

                    setInterval(function () {
                        $('.an').fadeIn(500).animate({
                            bottom: '20px'
                        }, 500).fadeOut(500).animate({
                            bottom: '0'
                        });
                    }, 1000);
                }

                if (index == 6) {
                    var $arr6 = $('.section6 .bg2').attr('rel').split(',');
                    $('.section6 .bg2').animate({
                        top: $arr6[2] + '%',
                        left: $arr6[3] + '%'
                    }, 1800);

                    $('.section6 .bb1').fadeIn(750);
                    $('.section6 .bb2').fadeIn(1500);
                }
            },

            onLeave: function (index, direction) {
                if(index == 1){
                    $('.section .bg').each(function(){
                        var $rel = $(this).attr('rel');
                        var $arr = $rel.split(',');
                        $(this).animate({
                            top: $arr[0] + '%',
                            left: $arr[1] + '%'
                        }, 500);
                    });

                    var $arrBg3 = $('.section .bg3').attr('rel').split(',');
                    $('.section .bg3').animate({
                        top: $arrBg3[0] + 'px',
                        left: $arrBg3[1] + 'px'
                    },500);

                    $('.section .bg4').fadeOut(500);
                    $('.top').animate({ bottom: '-550px' });
                }

                if (index == 2 || index == 3 || index == 4 || index == 5 || index == 6 || index == 7 || index == 8) {
                    $('.section .bg').each(function(){
                        var $rel = $(this).attr('rel');
                        var $arr = $rel.split(',');
                        $(this).animate({
                            top: $arr[0] + 'px',
                            left: $arr[1] + 'px'
                        }, 500);
                    });

                    $('.section .bb').each(function(){
                        $(this).delay(200).fadeOut().css('display', 'none');
                    });
                }

                if (index == 6) {
                    var $arr6 = $('.section6 .bg2').attr('rel').split(',');
                    $('.section6 .bg2').animate({
                        top: $arr6[0] + '%',
                        left: $arr6[1] + '%'
                    }, 500);

                    $('.section6 .bb1').delay(200).fadeOut().css('display', 'none');

                    $('.section6 .bb2').delay(200).fadeOut().css('display', 'none');
                }
            }
        });

        /*$(document).on('click', function () {
            autoScrolling();
        });

        $(window).resize(function(){
            autoScrolling();
        });

        function autoScrolling(){
            var $ww = $(window).width();
            if($ww < 1024){
                $.fn.fullpage.setAutoScrolling(false);
            } else {
                $.fn.fullpage.setAutoScrolling(true);
            }
        }*/
    });
</script>
</body>
</html>